<template>
  <router-link :to="props.linkTo" class="link-type">
    <div :class="['block', props.appendClass]">
      <div class="d-p1">{{ props.title }}</div>
      <div class="d-p2">
        <span>{{
          props.title.includes("率")
            ? parseFloat((props.crData * 100).toFixed(2)) + "%"
            : props.crData
        }}</span>
      </div>
      <div class="d-p3">
        <span>{{ props.type === 1 ? "日同比" : "月同比" }}</span>
        <el-icon
          color="green"
          v-if="props.tbData !== 0 && props.crData < props.tbData"
        >
          <Bottom />
        </el-icon>
        <el-icon
          color="red"
          v-if="props.tbData !== 0 && props.crData > props.tbData"
        >
          <Top />
        </el-icon>
        <span>
          {{
            props.tbData === 0
              ? ""
              : parseFloat(
                  (
                    (Math.abs(props.crData - props.tbData) * 100) /
                    props.tbData
                  ).toFixed(2)
                ) + "%"
          }}
        </span>
      </div>
      <div class="d-p3">
        <span>{{ props.type === 1 ? "日环比" : "月环比" }}</span>
        <el-icon
          color="green"
          v-if="props.hbData !== 0 && props.crData < props.hbData"
        >
          <Bottom />
        </el-icon>
        <el-icon
          color="red"
          v-if="props.hbData !== 0 && props.crData >= props.hbData"
        >
          <Top />
        </el-icon>
        <span>
          {{
            props.hbData === 0
              ? ""
              : parseFloat(
                  (
                    (Math.abs(props.crData - props.hbData) * 100) /
                    props.hbData
                  ).toFixed(2)
                ) + "%"
          }}
        </span>
      </div>
      <div class="ques">
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="props.tips"
          placement="top"
        >
          <el-icon><InfoFilled /></el-icon>
        </el-tooltip>
      </div>
    </div>
  </router-link>
</template>

<script setup>
const props = defineProps({
  crData: {
    type: Number,
    default: 0,
  },
  hbData: {
    type: Number,
    default: 0,
  },
  tbData: {
    type: Number,
    default: 0,
  },
  type: {
    type: String,
    default: "1",
  },
  title: {
    type: String,
    default: null,
  },
  linkTo: {
    type: String,
    default: null,
  },
  tips: {
    type: String,
    default: null,
  },
  appendClass: {
    type: String,
    default: null,
  },
});
</script>

<style lang="scss" scoped>
.first {
  border-radius: 4px 0 0 4px;
}
.last {
  border-right: 1px solid #e8e8e8;
  border-radius: 0 4px 4px 0;
}
.link-type {
  flex: 1;
}
.block {
  position: relative;
  min-width: 259px;
  min-height: 100px;
  padding: 16px;
  background: #fff;
  border-left: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  box-sizing: border-box;
  margin-top: 10px;
  .d-p1 {
    font-size: 14px;
    color: #666666;
  }
  .d-p2 {
    color: #333333;
    font-weight: bold;
    font-size: 28px;
  }
  .d-p3 {
    display: flex;
    align-items: center;
    color: #999999;
    font-size: 12px;
  }

  .ques {
    position: absolute;
    right: 15px;
    top: 15px;
    color: #bfbfbf;
    cursor: pointer;
  }
}
</style>
